<template>
  <div class="login-container">
    <a-form :form="form" id='components-form-demo-normal-login' @submit="handleSubmit" class="login-form">
      <h4 class="title">{{title}}</h4>
      <a-form-item>
        <a-input
          placeholder='账号'
          v-decorator="[
            'username',
            { rules: [{ required: true, message: 'Please input your username!' }] }
          ]"
        >
          <a-icon slot="prefix" type='user' style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          v-decorator="[
            'password',
            { rules: [{ required: true, message: 'Please input your Password!' }] }
          ]"
          type='password'
          placeholder='密码'
        >
          <a-icon slot="prefix" type='lock' style="color: rgba(0,0,0,.25)" />
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-checkbox
          v-decorator="[
            'remember',
            {
              valuePropName: 'checked',
              initialValue: true,
            }
          ]"
        >
          Remember me
        </a-checkbox>
        <a class='login-form-forgot' href=''>Forgot password</a>
        <a-button type='primary' htmlType='submit' class='login-form-button'>
          Log in
        </a-button>
        Or <a href=''>register now!</a>
      </a-form-item>
      <p class="userinfo"><span>账号:</span>ruiwei88888@163.com<span>密码:</span>123456</p>
    </a-form>
  </div>
</template>

<script>

export default {
  data () {
    return {
      title:"vue+mongod+nodejs构建项目后台",
      username: "",
      password: ""
    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
      })
    },
  },
}
</script>
<style lang="scss" rel="stylesheet/scss">
.login-container{
  width: 100%;
  height: 100%;
  background-image: url("../assets/image/loginBg.jpg");
  background-repeat:no-repeat;
  background-size: cover;
  position: fixed;
  color: #fff;
    .title{
      font-size: 20px;
      margin: 0;
      padding: 40px 0;
      color: #fff;
    }
    .el-input__inner{
      padding-left: 40px;
    }
    .el-form-item{
      margin-bottom:40px;
    }
    .el-input{
      width: 84%;
      input{
        background: transparent;
        color: #fff;
        height: 50px;
      }
    }
    .login-form{
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom:0;
      width: 620px;
      padding: 35px 50px 15px;
      margin: 120px auto;
  }
  .title,.login{
    text-align: center;
  }
  .login-btn{
    width: 150px;
  }
  .userinfo{
    text-align: center;
    font-style: italic;
    color: #FFF;
    span{
      padding:0 10px;
    }
  }
} 
#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
}
</style>